<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="jquery.min.js"></script>
	
	<style type="text/css">
        * {padding: 0;margin: 0;}
        ul { list-style-type: none;}

        .nemu_body {
            width: 500px;
            text-align:center;

        }
        .neum_head {
            border:1px solid #999;
            background-color:deeppink;
        }
        .groupTitle {
            display:block;
            height:20px;
            line-height:20px;
            font-size: 16px;
            border-bottom:1px solid #ccc;
            cursor:pointer;
        }

        .neum_head > div {
            height: 200px;
            background-color:green;
            display:none;
        }


	</style>
</head>
<body>
<ul class="nemu_body">
	<li class="neum_head">
		<span class="groupTitle">1首页</span>
		<div>
			<p>111</p>
			<p>222</p>
			<p>333</p>
		</div>
	</li>
	<li class="neum_head">
		<span class="groupTitle">2产品</span>
		<div>
			<p>111</p>
			<p>222</p>
			<p>333</p>
	</div>
	</li>
	<li class="neum_head">
		<span class="groupTitle">3售后</span>
		<div>
			<p>111</p>
			<p>222</p>
			<p>333</p>
	</div>
	</li>
</ul>
<script type="text/javascript">
	$(function () {
		//1. 给所有的span注册点击事件，让当前span的兄弟div显示出来
		$(".groupTitle").click(function () {

			//方法调用。
			$(this).next().slideDown(200)
				.parent().siblings()
				.children("div").slideUp(200);
		});
	});
</script>
</body>
</html>